<template>
  <common-card title="今日订单" :value="orderToday | numberFormat">
    <template #chart>
      <div id="chart" style="width: 100%; height:100%"></div>
    </template>
    <template #bottom>
      <span>昨日订单量</span>
      <span class="number">{{orderLastDay | numberFormat}}</span>
    </template>
  </common-card>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'TodayOrders',

/* 
"orderToday": 2562061,
"orderLastDay": 2100000,
"orderTrend": [610, 432, 220, 534, 790, 430, 220, 320, 532, 320, 834, 690, 530, 220],
"orderTrendAxis": ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00"],
*/
  computed: {
    ...mapState({
      orderToday: state => state.data.reportData.orderToday,
      orderLastDay: state => state.data.reportData.orderLastDay,
      orderTrend: state => state.data.reportData.orderTrend || [],
      // 初始值是undefined
      orderTrendAxis: state => state.data.reportData.orderTrendAxis || [],
    })
  },

  watch: {
    orderTrend () { // 一旦有数据了就调用
      // 重新给chart设置option
      this.chart.setOption(this.getOption())
    }
  },

  mounted () {
    // 初始化一个图表对象
    this.chart = this.$echarts.init(document.getElementById('chart'))
    /* 
    问题: 如果是动态数据显示图表不正常
    解决办法一: 在初始挂载时, 如果有数据才去设置选项
    解决办法二: 让初始的data数据不是undefined, 而是[]
    */
    // 解决办法一: 如果有数据才去设置选项
    /* if (this.orderTrend) {
      this.chart.setOption(this.getOption())
    } */

    this.chart.setOption(this.getOption())
  },

  methods: {
    getOption () {
      return {
        // x轴
        xAxis: {
          boundaryGap: false, // 两侧不留白
          show: false, // 不显示
          data: this.orderTrendAxis
        },
        // y轴
        yAxis: {
          show: false, // 不显示
        },

        // 系列
        series: {
          name: '实时订单数',
          type: 'line',
          data: this.orderTrend,
          smooth: true, // 平滑的
          areaStyle: {}, // 区域有颜色
          lineStyle: { // 隐藏曲线
            opacity: 0
          },
          itemStyle: { // 隐藏点
            opacity: 0
          }
        },

        // 网络: 包含图表的容器 ==> 充满它显示
        grid: {
          left: 0,
          top: 0,
          right: 0, 
          bottom: 0
        },

        // 图表的颜色
        color: ['#A64CA6'],

        // 提示框
        tooltip: { // 自动聚焦显示提示
          trigger: 'axis'
        }
      }
    }
  },
}
</script>

<style lang="scss" scoped>

</style>
